<template>
  <div class="wrap">

    <ItemContainer ref="VipService"
                   resourceUri="vip/service"
                   :resourceId="resourceData.id"
                   resourceName="service"
                   title="会员费设置"
                   @fetched="onFetched"
                   @patched="onPatched">
      <div slot="dataView">
        <el-form style="margin-top: 10px;" ref="form" :model="resourceData" label-width="40px">
          <el-form-item label="价格">
            <el-input class="group-group-input" v-model="resourceData.price" size="small" placeholder="价格" type="number"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit" size="small">保存</el-button>
          </el-form-item>
        </el-form>
      </div>
    </ItemContainer>

  </div>
</template>

<script>
  import ItemContainer from '../ItemContainer.vue'
  export default {
    data () {
      return {
        resourceData: {
          id: null,
          price: null
        }
      }
    },
    props: ['resourceId'],
    methods: {
      onFetched (data) {
        console.log(data)
        this.resourceData = data
      },
      onPatched (data) {
        console.dir(data)
        this.resourceData = data
      },
      onSubmit (event) {
        console.log(event, this.resourceData)

        // 不能为空
        if (!this.resourceData.price) {
          this.$message('请输入价格')
          return false
        }
        if (this.resourceData.id) {
          let data = {}
          data.price = this.resourceData.price

          this.$refs.VipService.patchData(data)
        } else this.$refs.VipService.postData(this.resourceData)
      }
    },
    components: {
      ItemContainer
    },
    created () {
      this.resourceData.id = this.$route.params.service_id
    }
  }
</script>

<style lang="css" scoped>
  .el-form-item {
    margin-bottom: 0;
  }
</style>
